<!DOCTYPE html>
<html lang="en">

<head>
  <title>Tidal Hi-Fi settings</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./settings.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css">
</head>

<body class="settings-window">
  <div class="settings-window__wrapper">
    <div class="settings-window__drag-area"></div>
    <a id="close" class="settings-window__close-button" title="Close settings">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.333 348.334" class="settings-window__svg-icon">
        <path fill="white" d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
            c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
            c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
            l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
            L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" />
      </svg>
    </a>

    <main class="settings">
      <input type="radio" name="tab" id="general" checked />
      <label for="general">General</label>

      <input type="radio" name="tab" id="api" />
      <label for="api">API</label>

      <input type="radio" name="tab" id="integrations" />
      <label for="integrations">Integrations</label>

      <input type="radio" name="tab" id="advanced" />
      <label for="advanced">Advanced</label>

      <input type="radio" name="tab" id="theming" />
      <label for="theming">Theming</label>

      <input type="radio" name="tab" id="about" />
      <label for="about">About</label>

      <div class="tabs">
        <section id="general-section" class="tabs__section">
          <div class="group">
            <p class="group__title">Playback</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Notifications</h4>
                <p>Show a notification when new media starts.</p>
              </div>
              <label class="switch">
                <input id="notifications" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Skip Artists automatically</h4>
                <p>The following list of artists (1 per line) will be skipped automatically.</p>
              </div>
              <label class="switch">
                <input id="skipArtists" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <textarea id="skippedArtists" class="textarea" cols="40" rows="5" spellcheck="false"></textarea>
            <div class="group__option">
              <div class="group__description">
                <h4>Block ads</h4>
                <p>
                  Disabled audio & visual ads, unlocked lyrics, suggested track, track info,
                  unlimited skips
                </p>
              </div>
              <label class="switch">
                <input id="adBlock" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
          </div>
          <div class="group">
            <p class="group__title">UI</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Fixed menubar</h4>
                <p>Always show TIDAL Hi-Fi's menu bar.</p>
              </div>
              <label class="switch">
                <input id="menuBar" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
          </div>
          <div class="group">
            <p class="group__title">System</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Tray icon</h4>
                <p>Show TIDAL Hi-Fi's tray icon.</p>
              </div>
              <label class="switch">
                <input id="trayIcon" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Static Window Title</h4>
                <p>Makes the window title "TIDAL Hi-Fi" instead of changing to the currently playing song.</p>
              </div>
              <label class="switch">
                <input id="staticWindowTitle" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Minimize on Close</h4>
                <p>Minimize window on close instead.</p>
              </div>
              <label class="switch">
                <input id="minimizeOnClose" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Hotkeys</h4>
                <p>
                  Enable extra hotkeys to achieve feature parity with the
                  <a class="external-link" data-url="https://defkey.com/tidal-desktop-shortcuts">desktop apps</a>.
                </p>
              </div>
              <label class="switch">
                <input id="enableCustomHotkeys" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Single instance</h4>
                <p>Prevent opening multiple TIDAL Hi-Fi's instances.</p>
              </div>
              <label class="switch">
                <input id="singleInstance" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
          </div>
        </section>

        <section id="api-section" class="tabs__section">
          <div class="group">
            <p class="group__title">API</p>
            <div class="group__description">
              <p>
                TIDAL Hi-Fi has a built-in web API to allow users to get current media information.
                You can optionally enable playback control as well.
              </p>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Web API</h4>
                <p>Enable the TIDAL Hi-Fi web API.</p>
              </div>
              <label class="switch">
                <input id="apiCheckbox" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <label for="port">API port</label>
                <input id="port" type="number" class="text-input" name="port" />
              </div>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>API hostname</h4>
                <p>By default (127.0.0.1) only local apps can interface with the API. <br />
                  Change to 0.0.0.0 to allow <strong>anyone</strong> to interact with it. <br />
                  Other options are available
                </p>
                <input id="hostname" type="text" class="text-input" name="hostname" />
              </div>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Playback control</h4>
                <p>Enable playback control from the web API.</p>
              </div>
              <label class="switch">
                <input id="playBackControl" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
          </div>
        </section>

        <section id="integrations-section" class="tabs__section">
          <div class="group">
            <p class="group__title">Integrations</p>
            <div class="group__description">
              <p>
                TIDAL Hi-Fi is extensible through the use of integrations. You can enable or
                disable them here.
              </p>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>MPRIS</h4>
                <p>
                  Enable MPRIS interface which provides a mechanism for discovery, querying and
                  basic playback control on Linux systems.
                </p>
              </div>
              <label class="switch">
                <input id="mprisCheckbox" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
          </div>
          <div class="group">
            <p class="group__title">Discord</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Discord RPC</h4>
                <p>Show what you're listening to on Discord.</p>
              </div>
              <label class="switch">
                <input id="enableDiscord" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div id="discord_options">

              <div class="group__option" class="hidden">
                <div class="group__description">
                  <h4>Show Idle Text</h4>
                  <p>Should the idle text be shown when idle?</p>
                </div>
                <label class="switch">
                  <input id="discord_show_idle" type="checkbox" />
                  <span class="switch__slider"></span>
                </label>
              </div>

              <div class="group__option" class="hidden">
                <div class="group__description">
                  <h4>Idle Text</h4>
                  <p>The text displayed on Discord's rich presence while idling in the app.</p>
                  <input id="discord_idle_text" type="text" class="text-input" name="discord_idle_text" />
                </div>
              </div>

              <div class="group__option" class="hidden">
                <div class="group__description">
                  <h4>Using Tidal Text</h4>
                  <p>The text displayed on Discord's rich presence while "showSong" is turned off</p>
                  <input id="discord_using_text" type="text" class="text-input" name="discord_using_text" />
                </div>
              </div>

              <div class="group__option" class="hidden">
                <div class="group__description">
                  <h4>Show media</h4>
                  <p>Show the current media in the Discord client</p>
                </div>
                <label class="switch">
                  <input id="discord_show_song" type="checkbox" />
                  <span class="switch__slider"></span>
                </label>
              </div>

              <div id="discord_show_song_options" class="hidden">

                <div class="group__option" class="hidden">
                  <div class="group__description">
                    <h4>Include timestamps</h4>
                    <p>Show current/end playtime in the Discord client</p>
                  </div>
                  <label class="switch">
                    <input id="discord_include_timestamps" type="checkbox" />
                    <span class="switch__slider"></span>
                  </label>
                </div>

                <div class="group__option" class="hidden">
                  <div class="group__description">
                    <h4>Details prefix</h4>
                    <p>Prefix for the "details" field of Discord's rich presence.</p>
                    <input id="discord_details_prefix" type="text" class="text-input" name="discord_details_prefix" />
                  </div>
                </div>

                <div class="group__option">
                  <div class="group__description">
                    <h4>Button text</h4>
                    <p>Text to display on the button below the media information.</p>
                    <input id="discord_button_text" type="text" class="text-input" name="discord_button_text" />
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="group">
            <p class="group__title">ListenBrainz</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Enable ListenBrainz</h4>
                <p>Scrobble your listens directly to ListenBrainz.</p>
              </div>
              <label class="switch">
                <input id="enableListenBrainz" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div id="listenbrainz__options" class="hidden">
              <div class="group__option">
                <div class="group__description">
                  <h4>ListenBrainz API Url</h4>
                  <p>There are multiple instances for ListenBrainz you can set the corresponding API url below.</p>
                  <input id="ListenBrainzAPI" type="text" class="text-input" name="ListenBrainzAPI" />
                </div>
              </div>
              <div class="group__option">
                <div class="group__description">
                  <h4>ListenBrainz User Token</h4>
                  <p>Provide the user token you can get from the settings page.</p>
                  <input id="ListenBrainzToken" type="text" class="text-input" name="ListenBrainzToken" />
                </div>
              </div>
            </div>
            <div class="group__description">
              <h4>ScrobbleDelay</h4>
              <p>The delay (in ms) to send a listen to ListenBrainz. Prevents spamming the API when you fast forward
                immediately</p>
              <input id="listenbrainz_delay" type="number" class="text-input" name="listenbrainz_delay" />
            </div>
          </div>
        </section>

        <section id="advanced-section" class="tabs__section">
          <div class="group">
            <p class="group__title">Settings</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Update frequency</h4>
                <p>
                  The amount of time, in milliseconds, that TIDAL Hi-Fi will refresh its playback info by scraping the
                  website.
                  The default of 500 seems to work in more cases but if you are fine with a bit more resource usage you
                  can decrease it as well.
                </p>
                <input id="updateFrequency" type="number" class="text-input" name="updateFrequency" />
              </div>
            </div>

            <div class="group__option">
              <div class="group__description">
                <h4>Tidal channel / URL</h4>
                <p>
                  Which URL Tidal Hi-Fi should use.
                  <strong>note! Beta might break at any time</strong>
                </p>
                <select class="select-input" id="channel" name="channel">
                  <option value="https://listen.tidal.com">Stable (listen.tidal.com)</option>
                  <option value="https://listen.stage.tidal.com">Staging (listen.stage.tidal.com)</option>
                </select>
              </div>
            </div>
          </div>
          <div class="group">
            <p class="group__title">Flags</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Disable hardware built-in media keys</h4>
                <p>
                  Also prevents certain desktop environments from recognizing the chrome MPRIS
                  client separately from the custom MPRIS client.
                </p>
              </div>
              <label class="switch">
                <input id="disableHardwareMediaKeys" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Enable GPU rasterization</h4>
                <p>Move a part of the rendering to the GPU for increased performance.</p>
              </div>
              <label class="switch">
                <input id="gpuRasterization" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Disable Background Throttling</h4>
                <p>
                  Makes app more responsive while in the background, at the cost of performance.
                </p>
              </div>
              <label class="switch">
                <input id="disableBackgroundThrottle" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
            <div class="group__option">
              <div class="group__description">
                <h4>Wayland support</h4>
                <p>
                  Adds a couple of Electron flags to help TIDAL Hi-Fi run smoothly on the Wayland window system.
                </p>
              </div>
              <label class="switch">
                <input id="enableWaylandSupport" type="checkbox" />
                <span class="switch__slider"></span>
              </label>
            </div>
          </div>
        </section>

        <section id="theming-section" class="tabs__section">
          <div class="group">
            <p class="group__title">Theming</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Custom CSS</h4>
                <p>
                  The css that you put in here will be injected into a style tag in the head of the document.
                </p>
              </div>
            </div>
          </div>
          <textarea id="customCSS" class="textarea" cols="40" rows="8" spellcheck="false"></textarea>

          <div class="group">
            <p class="group__title">Theme files</p>
            <div class="group__option">
              <div class="group__description">
                <h4>Current theme</h4>
                <p>
                  Select a theme below or "Tidal - Default" to return to the original Tidal look.
                </p>
                <select class="select-input" id="themesList" name="themesList">

                </select>
              </div>
            </div>

            <div class="group__option">
              <div class="group__description">
                <h4>Upload new themes</h4>
                <p>
                  Click the button and select the css files to import. They will be added to the theme list
                  automatically.
                </p>
                <div class="file-drop-area">
                  <div>
                    <span class="file-btn">Choose files</span>
                    <span id="file-message" class="file-msg">or drag and drop files here</span>
                    <input id="theme-files" class="file-input" type="file" accept=".css" multiple>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="about-section" class="tabs__section about-section">
          <img alt="tidal icon" class="about-section__icon" src="./icon.png" />
          <h4>TIDAL Hi-Fi</h4>
          <div class="about-section__version">
            <a target="_blank" rel="noopener"
              href="https://github.com/Mastermindzh/tidal-hifi/releases/tag/5.20.1">5.20.1</a>
          </div>
          <div class="about-section__links">
            <a target="_blank" rel="noopener" href="https://github.com/mastermindzh/tidal-hifi/"
              class="about-section__button">Github
              <i class="fa fa-external-link"></i></a>
            <a target="_blank" rel="noopener" href="https://github.com/Mastermindzh/tidal-hifi/issues"
              class="about-section__button">Report an issue <i class="fa fa-external-link"></i></a>
            <a target="_blank" rel="noopener" href="https://github.com/Mastermindzh/tidal-hifi/graphs/contributors"
              class="about-section__button">Contributors <i class="fa fa-external-link"></i></a>
          </div>
        </section>

        <footer class="footer">
          <p class="footer__note">
            <strong>Note</strong>: some settings may require a restart of TIDAL Hi-Fi.
          </p>
        </footer>
      </div>
    </main>
  </div>
</body>

</html>